<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/public.css">
        <link rel="stylesheet" href="css/index-header.css">
        <link rel="stylesheet" href="css/index-main.css">
        <link rel="stylesheet" href="css/index-footer.css">
        <title>善淘Buy42，每一次购买都是做一次公益</title>
    </head>
    <body>
        <header>
            <a href="index.html" class="logo">
                <img src="img/logo/Buy42_logo_横版_带网址_RGB.png" alt="">
            </a>
            <nav>
                <a href="about.html">关于我们</a>
                <a href="news.html">新闻事件</a>
                <a href="store.html">慈善商店</a>
                <a href="donation.html">捐赠登记</a>
                <a href="volunteers.html">志愿者平台</a>
            </nav>
        </header>
        <main>
            <div class="slider">
                <input type="radio" name="slider-r" id="slider-r1" checked>
                <label for="slider-r1"></label>
                <input type="radio" name="slider-r" id="slider-r2">
                <label for="slider-r2"></label>
                <input type="radio" name="slider-r" id="slider-r3">
                <label for="slider-r3"></label>
                <input type="radio" name="slider-r" id="slider-r4">
                <label for="slider-r4"></label>
                <ul>
                    <li><img src="img/slides/slider_0.jpg" alt=""></li>
                    <li>two</li>
                    <li>three</li>
                    <li>four</li>
                    <li>one</li>
                </ul>
            </div>
            <div class="stats">
                <div class="stats-head">
                    <h1 class="stats-title">公益透明度</br>可视化表</h1>
                    <p class="stats-text">我们对“人”的关注是始终不变的，接纳“不同”与“不足”的态度是不变，知行合一的坚持是始终不变的。这份透明度可视化表对我们而言意味着什么呢？意味着对他人真诚，对自己诚实。数字说明什么呢？我们很努力但并不完美，仍需要多方支援与帮助。希望您能怀着看待一个成长中的孩子的眼光看待这份透明度可视化表。</p>
                    <a href="#" class="stats-btn">
                        <div class="stats-btn-icon">
                            <img src="img/icon/合同.png" alt="">
                            <img src="img/icon/合同_hover.png" alt="">
                        </div>
                        阅读更多信息
                    </a>
                </div>
                <div class="stats-data">
                    <div id="data-a1" class="data">
                        <img src="img/icon/企业.png" alt=""><br>
                        <span class="counter">210059</span>
                        <span>件</span>
                        <h3>企业捐赠</br>闲置物资数量</h3>
                    </div>
                    <div id="data-a2" class="data">
                        <img src="img/icon/金融.png" alt=""><br>
                        <span class="counter">4618917.5</span>
                        <span>元</span>
                        <h3>企业捐赠</br>闲置物资价值</h3>
                    </div>
                    <div id="data-b1" class="data">
                        <img src="img/icon/团队.png" alt=""><br>
                        <span class="counter">27127</span>
                        <span>件</span>
                        <h3>个人捐赠</br>闲置物资数量</h3>
                    </div>
                    <div id="data-a2" class="data">
                        <img src="img/icon/金融.png" alt=""><br>
                        <span class="counter">556250.5</span>
                        <span>元</span>
                        <h3>个人捐赠</br>闲置物资价值</h3>
                    </div>
                </div>
            </div>
            <div class="service">
                <h1>您能为公益做些什么？</h1>
                <ul>
                    <li id="service1">
                        <h2>捐赠物资</h2>
                        <p>让闲置物品重获新生</p>
                        <div class="service-img">
                            <img src="img/service/捐赠物资.jpg" alt="">
                            <a href="#"></a>
                        </div>
                    </li>
                    <li id="service2">
                        <h2>爱心购物</h2>
                        <p>每次购物都是做公益</p>
                        <div class="service-img">
                            <img src="img/service/爱心购物.jpg" alt="">
                            <a href="#"></a>
                        </div>
                    </li>
                    <li id="service3">
                        <h2>聚善众筹</h2>
                        <p>让爱的足迹踏遍全国</p>
                        <div class="service-img">
                            <img src="img/service/捐献爱心.jpg" alt="">
                            <a href="#"></a>
                        </div>
                    </li>
                    <li id="service4">
                        <h2>加入我们</h2>
                        <p>欢迎志愿者参与公益</p>
                        <div class="service-img">
                            <img src="img/service/志愿者.jpg" alt="">
                            <a href="#"></a>
                        </div>
                    </li>
                </ul>
            </div>
        </main>
        <article>
            <img src="" alt="">
        </article>
        <footer>
            <div class="info">
                <div class="info-card" id="wechat">
                    <img src="img/info/善淘Buy42公众号_二维码.jpg" alt="">
                    <div class="info-text">
                        <h3>善淘Buy42</br>微信公众号</h3>
                        <p>扫码关注公众号</br>获取更多公益资讯</p>    
                    </div>
                </div>
                <div class="info-card" id="online-store">
                    <img src="img/info/Buy42微商城.png" alt="">
                    <div class="info-text">
                        <h3>善淘Buy42</br>线上微商城</h3>
                        <p>扫一扫立即下单</br>足不出户做公益</p>    
                    </div>
                </div>
                <div class="info-card" id="store">
                    <a href="store.html" class="store-btn">
                        <img src="img/info/个体.png" alt="">
                        <img src="img/info/个体_hover.png" alt="">
                    </a>
                    <div class="info-text">
                        <h3>善淘Buy42</br>线下慈善商店</h3>
                        <p>点击左边立即查询</br>慈善商店就在您身边</p>
                    </div>
                </div>
            </div>
            <div class="end">
                <p>© 2019 上海聚善慈善超市 所有权利均予保留</p>
                <div class="info-link">
                    <img src="img/public/beian_gov_cn.png" alt=""><a href="#">沪公网安备 31010602004333</a>
                    <a href="#">沪ICP备16009313号-2</a>
                </div>
            </div>
        </footer>

    </body>
</html>